<template>
  <div
    :style="getStyle"
    v-bind="attrs"
    class="svg-style u-f u-f-ac u-f-ajc"
    aria-hidden="true"
  >
    <span :style="'font-size:' + props.size + 'px'" :class="svgHref"></span>
  </div>
</template>

<script setup lang="ts">
import { CSSProperties, useAttrs } from "vue";
import { computed } from "vue";

let attrs = useAttrs();
interface propsInterface {
  iconClass?: string;
  iconStyle?: object;
  className?: string;
  size?: string | number;
}
let props = withDefaults(defineProps<propsInterface>(), {
  iconClass: "",
  className: "",
  size: "12",
});

const svgHref = computed(() => {
  return `customer-video-iconfont icon-${props.iconClass}`;
});
const getStyle = computed((): CSSProperties => {
  const { size } = props;
  let s = `${size}`;
  s = `${s.replace("px", "")}px`;
  return {
    width: s,
    height: s,
    fill: "currentColor",
    ...props.iconStyle,
  };
});
</script>

<style scoped lang="less">
.svg-style:focus {
  outline: none;
}
/* flex布局 */
.u-f,
.u-f-ac {
  flex-shrink: 0; //给flex布局添加固定宽度
  display: flex !important;
}
.u-f-ac,
.u-f-ajc {
  align-items: center;
}
/* 水平方向居中 */
.u-f-ajc {
  justify-content: center;
}
.u-f-ajs {
  justify-content: space-between;
}
.u-f-aja {
  justify-content: space-around;
}
.u-f-spa {
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
